<template>
    <div class="card-info-page" v-if="!loading">

        <download></download>

        <!-- <mt-header class="page-header" fixed title="信用卡详情"> -->
            <!-- <router-link to="/loaninfo" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link> -->
            <!-- <mt-button icon="more" slot="right"></mt-button> -->
        <!-- </mt-header> -->

        <!-- <div class="hedaer-mask">
            <div class="hedaer-bg-color"></div>
        </div>
        <div class="hedaer-bg-color"></div>  -->


        <div class="card-info">
            <div class="card-img" :style="'background:url('+credit_details.credit_product_url+') center/cover no-repeat;'">
            </div>
            <h1>{{credit_details.credit_product_name}}</h1>
            <div class="card-doc">
                {{credit_details.credit_product_outline}}
            </div>
            <div class="card-lable">
                <span v-for="item in credit_tag_str" :key="item">{{item}}</span>
            </div>
        </div>

        <div class="loan-adviser">
            <div class="main-title">
                服务顾问
            </div>
            <div class="conten" style="padding: 0">
                <div class="adviser-list">
                    <div class="adviser-list-info">
                        <img :src="agent_admin_info.avatar==''?'../assets/img/dkxq-da.png':agent_admin_info.avatar" alt=""/>
                        <div class="adviser-info">
                            <p>
                                {{agent_admin_info.real}}
                                <img :v-if="agent_admin_info.is_bond==2" src="../assets/img/baozhengjin.png" alt="" srcset=""/>
                            </p>
                            <div class="lable-list">
                                <span :v-if="agent_admin_info.is_company==2">企业认证</span>
                                <span :v-if="agent_admin_info.is_real==2">实名认证</span>
                                <span :v-if="agent_admin_info.is_phone==2">手机认证</span>
                            </div>
                            <div class="star">
                                <div class="star-no" style="">
                                    <div class="star-yes" :style="'width:'+eavluate+'%'"></div>
                                    <i>{{eavluate/10}}</i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p>
                        <span>服务说明</span>
                        {{agent_admin_info.service_ote}}
                    </p>
                </div>
            </div>
        </div>

        <div class="loan-explain">

            <div class="main-title">
                信用卡详情
            </div>

            <div class="explain-list">
                <!--文字内容  -->
                <pre>{{credit_details.credit_content_txt}}</pre>
                <!-- 图片内容 -->
                <img v-for="item in credit_content_img" :key="item.id" :src="item"  alt="">
            </div>

        </div>

        <!-- <div class="loan-explain">

            <div class="main-title">
                专属特权
            </div>

            <div class="explain-list">
                <div>
                    <p>1）支付宝消费1元累积分</p>
                </div>
                <div>
                    <p>1）支付宝消费1元累积分</p>
                </div>
                <div>
                    <p>1）支付宝消费1元累积分</p>
                </div>
            </div>

        </div>

        <div class="loan-explain">

            <div class="main-title">
                基本信息
            </div>

            <div class="essential-info conten-box">
                <div>
                    <label>
                        <span>等</span>
                        <span>级</span>
                    </label>
                    <p>支付宝消费1元累积支付宝消费1元累积分支付宝消费1元累积分分</p>
                </div>
                <div>
                    <label>
                        <span>等</span>
                        <span>级</span>
                        <span>级</span>
                        <span>级</span>
                    </label>
                    <p>支付宝消费1元累支付宝消费1元累积分积分</p>
                </div>
                <div>
                    <label>
                        <span>等</span>
                        <span>级</span>
                    </label>
                    <p>支付宝消费1元累积分</p>
                </div>
            </div>

        </div>

        <div class="loan-explain">

            <div class="main-title">
                费用信息
            </div>

            <div class="essential-info conten-box">
                <div>
                    <label>
                        <span>等</span>
                        <span>级</span>
                    </label>
                    <p>
                        <i>支付宝消费1元累积支付宝消费1元累积分支付宝消费1元累积分分</i>
                        <b>取现比例取现比例取现比例取现比例取现比例</b>
                    </p>
                </div>
                <div>
                    <label>
                        <span>等</span>
                        <span>级</span>
                        <span>级</span>
                        <span>级</span>
                    </label>
                    <p>
                        <i>支付宝消费1元累积支付宝消费1元累积分支付宝消费1元累积分分</i>
                        <b>取现比例取现比例取现比例取现比例取现比例</b>
                    </p>
                </div>
                <div>
                    <label>
                        <span>等</span>
                        <span>级</span>
                    </label>
                    <p>
                        <i>支付宝消费1元累积支付宝消费1元累积分支付宝消费1元累积分分</i>
                        <b>取现比例取现比例取现比例取现比例取现比例</b>
                    </p>
                </div>
            </div>

        </div>


        <div class="loan-explain">

            <div class="main-title">
                办卡流程
            </div>

            <div class="process-info conten-box">
                <img src="../assets/img/bank_img_flows.png" alt="" srcset="">
            </div>

        </div>

        <div class="loan-qa">
            <div class="main-title">
                常见问题
            </div>
            <div class="conten">
                <div class="loan-qa-info">
                    <div>
                        <img src="../assets/img/dkxq-wen.png" alt="" srcset="">
                        <p>我是国企员工，工资打卡4000以上，工作5年了，信用卡有过逾期，能贷款吗？</p>
                    </div>
                    <div>
                        <img src="../assets/img/dkxq-da.png" alt="" srcset="">
                        <p>我是国企员工，工资打卡4000以上，工作5年了，信用卡有过逾期，能贷款吗？</p>
                    </div>
                </div>
            </div>
        </div> -->



        <div class="apply-btn" @click="nav_appDownload">立即申请</div>

    </div>
</template>

<script>

//底层
import Vue from 'vue';

//头部
import { Header,Button } from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);

//下载头部
import download from '../components/Download';

export default {
    components:{ download },
    data(){
        return{
            loading:true,
            credit_details:[],
            credit_tag_str:[],
            credit_content_txt:'',
            credit_content_img:[],
            agent_admin_info:[],
            eavluate:''
        }
    },
    mounted:function (){

        //取得?后面的参数
        var credit_id = this.$getUrlPara('id');

        //取得信用卡详情
        this.$api.credit_details({
            credit_id:credit_id
        },e=>{

            //设置信用卡数据
            this.credit_details = e;

            //设置标签数据
            this.credit_tag_str = e.credit_tag_str;

            //整理图片数据
            var credit_content_img = e.credit_content_img.split(',');
            this.credit_content_img = credit_content_img;

            //设置顾问数据
            this.agent_admin_info = e.agent_admin_info;

            //计算评分
            var eavluate = e.agent_admin_info.evaluate_rate;
            if(eavluate==''||eavluate==0){
                this.eavluate = 0;
            }else{
                this.eavluate = eavluate*10;
            }

            //渲染页面
            this.loading = false;
        });

    },
    methods:{
        nav_appDownload: function(){
            this.$router.push({ path: '/appDownload' })
        }
    }
}
</script>

<style lang="scss">
    .card-info-page{
        padding-top:  1.2rem;
        padding-bottom: .98rem;
        .page-header{
            background: #fff !important;
            color: #323232
        }


        .card-info{
            background-color: #fff;
            padding: .24rem;
            .card-img{
                height: 4.4rem;
                overflow: hidden;
                border-radius: .24rem;
            }

            h1{
                padding-top: .3rem;
                font-size: .36rem;
                font-weight: 500;
            }

            .card-doc{
                padding: .1rem 0 .1rem 0;
                font-size: .24rem;
                color: #999;
            }

            .card-lable{
                span{
                    border: 1px solid #479EF8;
                    padding: 0 .12rem;
                    font-size: .2rem;
                    color: #479EF8;
                    height: .35rem;
                    display: inline-block;
                    line-height: .38rem;
                    margin-right: .1rem;
                }
            }

        }

        .loan-explain{
            .explain-list{
                background-color: #fff;
                padding: .24rem;
                div{
                    margin-bottom: .24rem;
                    span{
                        background-color: #FF9A26;
                        display: inline-block;
                        width: .2rem;
                        height: .2rem;
                        transform:rotate(90deg);
                    }
                }
                div:last-child{
                    margin-bottom: 0;
                }
                p{
                    margin-bottom: .3rem;
                }
                img{
                    width: 100%;
                    display: block;
                }
                pre {
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    font-size: .22rem;
                }
            }
        }


        .essential-info{
            div{
                display: flex;
                margin-bottom: .3rem;

                label{
                    color: #999;
                    display: flex;
                    width: 1.5rem;
                    min-width: 1.5rem;
                    justify-content: space-between;
                    margin-right: .5rem;
                }
                p{
                    display: flex;
                    flex-direction: column;
                    b{
                        font-size: .28rem;
                        color: #999;
                    }
                }
            }
        }

        .process-info{
            img{
                width: 100%;
            }
        }

         .loan-qa-info{
            div{
                display: flex;
                img{
                    width: .4rem;
                    min-width: .4rem;
                    height: .4rem;
                    margin-right: .2rem;
                    position: relative;
                    top: .08rem;
                }
                margin-bottom: .5rem;
                p{
                    font-size: .28rem;
                }
            }
            div:last-child{
                margin-bottom: 0;
                p{
                    color: #999;
                }
            }
        }



        .adviser-list{
            padding: .24rem;
            border-bottom: 1px solid #eee;
            &>p{
                display: flex;
                align-items: center;
                font-size: .24rem;
                color: #999;
                padding-top: .2rem;
                margin-top: .3rem;
                border-top: 1px solid #eee;
                span{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: .2rem;
                    background-color: #FA5D5D;
                    color: #fff;
                    padding: .05rem .1rem;
                    border-radius: .07rem;
                    margin-right: .1rem;
                }
            }
            .adviser-list-info{
                display: flex;
                &>img{
                    width: 1.4rem;
                    height: 1.4rem;
                    border-radius: $radius;
                    margin-right: .24rem;
                }

                .adviser-info{
                    height: 1.4rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p{
                        display: flex;
                        align-items: center;
                        font-size: .32rem;
                        font-weight: bold;
                        img{
                            width: .32rem;
                            height: .32rem;
                            min-width: .32rem;
                            margin-left: .18rem;
                        }
                    }

                    .lable-list{
                        margin-bottom: .2rem;
                        span{
                            border: 1px solid $border-color;
                            padding: 0 .1rem;
                            font-size: .18rem;
                            border-radius: $radius;
                            color: #479EF8;
                            border-color: #479EF8;
                            height: .3rem;
                            line-height: .32rem;
                            display: inline-block;
                        }
                        span+span{
                            color: #30B849;
                            border-color: #30B849;
                        }
                        span+span+span{
                            color: #FA5D5D;
                            border-color: #FA5D5D;
                        }
                    }
                }


                .star{
                    .star-no{
                        width: 1.8rem;
                        height: .26rem;
                        background: url('../assets/img/pj-wuxingji.png');
                        background-size: cover;
                        position: relative;
                        i{
                            position: absolute;
                            right: -.4rem;
                            font-size: .24rem;
                            top: .03rem;
                            color: #E99318;
                        }
                    }
                    .star-yes{
                        width: 1.8rem;
                        height: .26rem;
                        background: url('../assets/img/pjiayxq.png');
                        background-size: cover;
                    }
                }
            }
        }

        .apply-btn{
            @include newC;
            height: .98rem;
            line-height: .98rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            color: #fff;
            font-weight: 500;
        }
    }
</style>



